<div id="content">

  <!-- row -->
  <div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h1 class="page-title txt-color-blueDark text-center well">

        <!-- PAGE HEADER -->
        SmartAdmin Pre-built Skins<br>
        <small class="text-primary">Don't like the default look of SmartAdmin? Not a problem! SmartAdmin comes with 6 prebuilt skins to choose from.</small>
      </h1>

    </div>
    <!-- end col -->

  </div>
  <!-- end row -->

  <!--
      The ID "widget-grid" will start to initialize all widgets below
      You do not need to use widgets if you dont want to. Simply remove
      the <section></section> and you can use wells or panels instead
      -->

  <!-- widget grid -->
  <section id="widget-grid" class="">

    <!-- row -->

    <div class="row">

      <!-- a blank row to get started -->
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Skin name "<strong>Glass</strong>" <br>
            <small>Add the following class to body tag <code>.smart-style-5</code></small>
          </h5>
          <img src="assets/img/demo/layout-skins/skin-glass.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Skin name "<strong>Google</strong>" <br>
            <small>Add the following class to body tag <code>.smart-style-3</code></small>
          </h5>
          <img src="assets/img/demo/layout-skins/skin-google.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>

    </div>

    <div class="row">

      <!-- a blank row to get started -->
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Skin name "<strong>PixelSmash</strong>" <br>
            <small>Add the following class to body tag <code>.smart-style-4</code></small>
          </h5>
          <img src="assets/img/demo/layout-skins/skin-pixel.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Skin name "<strong>Dark Elegance</strong>" <br>
            <small>Add the following class to body tag <code>.smart-style-1</code></small>
          </h5>
          <img src="assets/img/demo/layout-skins/skin-dark.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>

    </div>

    <div class="row">

      <!-- a blank row to get started -->
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Skin name "<strong>Default</strong>" <br>
            <small>Add the following class to body tag <code>.smart-style-0</code></small>
          </h5>
          <img src="assets/img/demo/layout-skins/skin-default.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Skin name "<strong>Ultra Light</strong>" <br>
            <small>Add the following class to body tag <code>.smart-style-2</code></small>
          </h5>
          <img src="assets/img/demo/layout-skins/skin-ultralight.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>

    </div>
    <!-- end row -->

  </section>
  <!-- end widget grid -->


</div>
